<script setup>
import {onMounted, ref} from 'vue'
//导入axios，执行npm install axios（注意C:\Users\ASUS\Desktop\BIG_EVENT\前端\big_event\整站使用Vue\learn-vue>npm install axios）
//查看node_modules会发现出现axios文件夹
import axios from 'axios'
//发送异步请求，获取所有文章数据
let articleList=ref([])//定义响应数据
onMounted(()=>{
    axios({
        url:"http://localhost:8080/article/getAll",
        method:'get'
    }).then(result=>{
        //console.log(result.data)
        //注意value
        articleList.value=result.data
    }).catch(result=>{
        console.log(result)
    })
})
//定义响应数据
const searchConditions=ref({
    category:'',
    state:''
})
//声明search函数
// function search(){

// }
const search=function(){//更常用的声明方式
    axios({
        url:"http://localhost:8080/article/search",
        method:'get',
        // params:{
        //     category:searchConditions.value.category,//注意value
        //     state:searchConditions.value.state
        // }
        //另一种写法...解构运算符,解构赋值 是一种特殊的语法，它使我们可以将数组或对象“拆包”至一系列变量中，因为有时这样更方便。
        params:{...searchConditions.value}
    }).then(result=>{
        console.log(result.data)
        articleList.value=result.data//注意value
    }).catch(function(result){
        console.log(result)
    })
}
</script>
<template>
<!--html元素-->
    文章分类：<input type="text" v-model="searchConditions.category">
    文章状态：<input type="text" v-model="searchConditions.state">
    <button v-on:click="search">搜索</button>
    <table border="1 solid">
        <tr>
            <th>标题</th>
            <th>分类</th>
            <th>时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <tr v-for="(article,index) in articleList">
            <td>{{ article.title }}</td>
            <td>{{ article.category }}</td>
            <td>{{ article.time }}</td>
            <td>{{ article.state }}</td>
            <td>
                <button>编辑</button>
                <button>修改</button></td>
        </tr>

    </table>
</template>